<template>
  <h1>App</h1>
  <hr />
  <!-- 在子组件上使用属性绑定，引用 ts 中定义的数据并传递给子组件 -->
  <!-- 父组件向子组件传值使用自定义属性 -->
  <!-- 在父组件中，对子组件使用注册的自定义事件名，可以在自定义事件的处理函数中接受到自定义事件的参数 -->
  <!-- 该参数即为子组件传递给父组件的数据 -->
  <Child
    :data="data"
    :dataChange="dataChange"
    @cus1="cus1"
    @cus2="cus2"
    ref="child"
  ></Child>
</template>
<script setup lang="ts">
// 导入子组件
import { onMounted, reactive, ref, Ref } from 'vue'
import Child from './Child.vue'
// 定义 data 数据
const data = reactive({
  name: 'Tom',
})
// 定义修改 data 数据的方法
const dataChange = () => {
  data.name += '='
}
// 自定义事件的事件处理函数
// 在子组件中调用触发自定义事件的函数，会触发父组件的自定义事件，并触发对应的事件处理函数
const cus1 = (childData1: Object, flag: boolean) => {
  console.log(childData1, flag)
}
const cus2 = (childData2: Ref<string>) => {
  console.log(childData2)
}
// 引用子组件Child
const child = ref()
onMounted(() => {
  console.log(child)
})
</script>
<style scoped></style>
